import React from 'react'
import {message} from 'antd'
import QueueAnim from 'rc-queue-anim/lib/QueueAnim'
import PubSub from 'pubsub-js/src/pubsub'
import {notification,Modal,Icon } from 'antd'
const confirm = Modal.confirm;
import config from './../libs/config.js'

// import '../styles/accounts.scss'
import '../styles/sync.scss'

export default class sync extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tasks: [],
            objAccount: {},
        }
    }
    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','sync')
        PubSub.publish('updateTitle','同步数据')
        PubSub.subscribe('emitRefreshTask',this.refreshTask)
        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        })
        t.getAllTask();
    }

    refreshTask = () => {
        this.getAllTask();
    }
    addAccount = (e) => {

    }

    getAllTask =()=> {
        var t = this;
        var hide = message.loading('加载中...',0)
        $.ajax({
            url: config.server_host + '/api/allsync',
            type: 'get',
            success: function(data) {
                t.setState({
                    tasks: data.data
                })
                hide();
            }
        })
    }

    handleOk = (e) => {

    }
    handleSync = (e) => {
        var t = this;
        $.ajax({
            url: config.server_host + '/api/sync',
            type: 'post',
            data: {
                platform: t.state.objAccount.platform,
                user: t.state.objAccount.user,
                pwd: t.state.objAccount.pwd
            },
            success: function(data) {
                if (data.code === -1) {
                    const hide = message.loading(data.message,0)
                    setTimeout(hide,2000)
                } else {
                    const hide = message.success('已发送同步请求,后续在该页面查看同步状态!',0)
                    setTimeout(hide,2000)
                }
                t.refreshTask();
            }
        })
    }

    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box pkl-sync" key="a">
                    
                    <div className="pkl-btn sync_btn" onClick={t.handleSync.bind(this)}>同步数据</div>
                    <div className="list">
                        {
                            t.state.tasks.map(function(i) {
                                return (
                                    <div className="line">
                                        <div className="content">
                                            <div className="inline">
                                                <span className="platform">平台: {i.platform}</span>
                                            </div>
                                            <div className="inline">
                                                <span className="platform">账号: {i.user}</span>
                                            </div>
                                            
                                            {
                                                i.finished ? (
                                                    <div className="inline rounds" >
                                                    <span className="platform">已完成同步的牌局:</span> 
                                                        {i.rounds.map(function(j,index){
                                                            return <span className="roundName">{index+1}.{j.title} </span>
                                                        })}
                                                    </div>
                                            ) : <span/>
                                            }
                                            
                                            <div className="inline">
                                                <span className="platform">状态: </span>
                                                <span className="status" style={i.finished ? {background: 'green'} : {}}>{i.finished ? '同步完成': '同步中'}</span>
                                            </div>                                    
                                        </div>
                                        <div className="arrow">
                                            <Icon type="right" />
                                        </div>
                                    </div>
                                )
                            })
                        }
                        {
                           t.state.tasks.length === 0 ? (function(){
                                return (
                                    <div className="nodata">暂无数据</div>
                                )
                            })() :  (function(){
                                return (
                                    <div/>
                                )
                            })()
                        }
                    </div>
                </div>
            </QueueAnim>
        )
    }
}
